import React, { Component } from 'react'

// 函数组件 函数组件没有组件实例this
function Fn() {
  // function handlerClick(e) {
  //   console.log('clicked', e)
  // }
  const handlerClick1 = (e) => {
    console.log('clicked', e)
    console.log('获取触发事件的元素', e.target)
  }

  return (
    <div>
      <h1>事件绑定</h1>
      <p>
        <a href="http://baidu.com">百度</a>
      </p>
      <button onClick={handlerClick1}>点击</button>
    </div>
  )
}

// 类组件
class App extends Component {
  handlerClick(e) {
    console.log('组件实例', this)
    console.log('clicked', e)
  }
  handlerClick2 = (e) => {
    console.log('组件实例', this)
    console.log('clicked', e)
  }
  go = (e) => {
    console.log(e)
    // 阻止跳转
    e.preventDefault()
  }
  render() {
    return (
      <div>
        <h1>事件绑定</h1>
        <p>
          <a onClick={this.go} href="http://baidu.com">
            百度
          </a>
        </p>
        <button onClick={this.handlerClick}>点击1</button>
        <button onClick={(e) => this.handlerClick(e)}>点击2</button>
        <button onClick={this.handlerClick.bind(this)}>点击3</button>
        <button onClick={this.handlerClick2}>点击4</button>
      </div>
    )
  }
}

export default App
